<template>
    <section class="epic-edit-canvas">
        <KEditScreenContainer>
            <div ref="epicEditRangeRef" class="epic-edit-range rounded-md overflow-auto relative"
                :style="getEditRangestyle">
                <ENodeItem :schema="rootSchema" />
                <EPreviewWidgets ref="ePreviewWidgetsRef" />
            </div>
        </KEditScreenContainer>
    </section>
</template>
<script lang="ts" setup>
import { PageSchema } from '../../../../../types/epic-designer'
import EPreviewWidgets from './previewWidgets.vue'
import ENodeItem from './nodeItem.vue'
import KEditScreenContainer from './editScreenContainer.vue'
import { ref, inject, computed, onMounted } from 'vue'

const epicEditRangeRef = ref<HTMLDivElement | null>(null)
const ePreviewWidgetsRef = ref<typeof EPreviewWidgets | null>(null)

const pageSchema = inject('pageSchema') as PageSchema
const rootSchema = computed(() => {
    return pageSchema.schemas[0]
})

const getEditRangestyle = computed(() => {
    return {
        width: '100%',
        height: '100%'
    }
})

onMounted(() => {
    ePreviewWidgetsRef.value?.handleInit(epicEditRangeRef.value)
})
</script>